# 使用官方Node.js作为基础镜像
FROM node:16

# 首先复制项目的依赖配置文件
COPY package.json yarn.lock ./

# 接着复制项目所有文件，这一步会生成一个新的层
COPY ./ /vue-docker

# 设置工作目录
WORKDIR /vue-docker

# 安装项目依赖，这一步会生成一个独立的层，并且只有在package.json或yarn.lock变化时才会重新执行
RUN npm install 

# 构建项目，这一步也会生成一个新的层
RUN npm run build

# 使用Nginx镜像来运行构建好的项目
FROM nginx:latest

# 创建文件夹
RUN mkdir /vue-docker

# 将构建好的项目复制到Nginx镜像的/usr/share/nginx/html目录下
# COPY --from=builder /app/dist/ /usr/share/nginx/html
COPY --from=0 /vue-docker/dist /vue-docker

# 复制Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80